<template>
	<view>
		<view class="header status_bar">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text">修改业主信息</view>
		</view>
		<view class="clear_box"></view>

		
		
		

		<view class="address_list">
			<view class="title">姓名</view>
			<input type="text" value="" placeholder="请填写姓名" v-model="name" />
		</view>

		<view class="address_list">
			<view class="title">联系电话</view>
			<input type="text" value="" placeholder="请填写联系电话" v-model="phone" />
		</view>
		
		<picker @change="openClassType02" :value="classTypeIndex02" :range="classTypeData02" :range-key="'name'">
			<view class="address_list">
				<view class="title">楼栋号</view>
				<input :disabled="true" type="text" value="" placeholder="请选择楼栋号" v-model="classTypeValue02" />
			</view>
		</picker>

		<view class="address_list">
			<view class="title">门牌号</view>
			<!-- <input type="text" value="" placeholder="门牌号（街道、楼牌号）" /> -->
			<textarea name="" id="" placeholder="例：6栋三单元301" v-model="puerta"></textarea>
		</view>

		<button class="confirm02" @tap="goSubmit">修改</button>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:'',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				areaCode: '',
				list: [],
				classTypeIndex: 0,
				classTypeValue: '',
				classTypeData: [], //一级分类
				classTypeId: '',
				classTypeIndex02: 0,
				classTypeValue02: '',
				classTypeData02: [], //一级分类
				classTypeId02: '',
				name:'',
				phone:'',
				puerta:'',
				infoId:'',
				vid:'',
			};
		},
		onLoad(e) {
			let that = this;
			that.infoId =e.id;
			that.vid = e.vid
			if(that.infoId){
				that.getInfo();
				
			}
			if(that.vid){
				that.getClassification();
			}
		},
		methods: {
			getInfo(){
				let that = this;
				that.Net._get('landlord/' + that.infoId, {}, res => {
					if (res.code == 200) {
						//console.log(res);
						that.name = res.data.name;
						that.phone = res.data.phone;
						that.puerta = res.data.address;
						if(res.data.building_name){
							that.classTypeValue02 = res.data.building_name;
						}
						
					}
				});
			},
			goSubmit(){
				let that = this;

				if (!that.name) {
					that.Msg.Fail('请输入姓名');
					return;
				}
				if (!that.phone) {
					that.Msg.Fail('请输入电话');
					return;
				}
				if (!that.puerta) {
					that.Msg.Fail('请输入门牌号');
					return;
				}
				if (!that.puerta) {
					that.Msg.Fail('请输入门牌号');
					return;
				}
				
				that.Net._put('landlord/' + that.infoId, {
					name:that.name,
					phone:that.phone,
					address:that.puerta,
					building_id:that.classTypeId02,
				}, res => {
					if (res.code == 200) {
						//console.log(res);
						that.Msg.Success('修改成功', res => {
							uni.navigateBack({});
						});
				
					}
				});
				
			},
			getComunidad() {
				let that = this;
				that.Net._get('get_all_area', {
					region_id: that.areaCode
				}, res => {
					if (res.code == 200) {
						//console.log(res);
						that.classTypeData = res.data;
						if (that.classTypeData.length == 0) {
							uni.showToast({
								title: "该地区暂无小区",
								icon: "none",
								duration: 1000
							})
						}

					}
				});
			},
			getClassification(){
				let that = this;
				that.Net._get('village_building', {
					village_id: that.vid
				}, res => {
					if (res.code == 200) {
						//console.log(res);
						that.classTypeData02 = res.data;
				
					}
				});
			},
			openClassType: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value);
				this.classTypeIndex = e.target.value;
				this.classTypeValue = this.classTypeData[this.classTypeIndex].name;
				this.classTypeId = this.classTypeData[this.classTypeIndex].id;

				if(this.classTypeId){
					this.getClassification();
				}
			},
			openClassType02: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value);
				this.classTypeIndex02 = e.target.value;
				this.classTypeValue02 = this.classTypeData02[this.classTypeIndex02].name;
				this.classTypeId02 = this.classTypeData02[this.classTypeIndex02].id;

			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		}
	};
</script>

<style>
	page {
		padding-top: 4%;
	}

	.address_list {
		width: 92%;
		margin: 0 auto;
		display: flex;
		background-color: #fff;
		padding: 4%;
		border-bottom: 1px solid #f5f5f5;
	}

	.address_list:nth-child(3) {
		border-radius: 2vw 2vw 0 0;
	}

	.address_list:nth-child(5) {
		border-radius: 0 0 2vw 2vw;
	}

	.address_list .icon {
		width: 8vw;
		text-align: left;
		color: #FF5301;
		height: 7vw;
		line-height: 7vw;
		font-size: 7vw;
	}

	.address_list:nth-child(4) .icon {
		font-size: 5.5vw;
	}

	.address_list:nth-child(5) .icon {
		font-size: 5.5vw;
	}

	.address_list:nth-child(6) .icon {
		font-size: 5.5vw;
	}

	.address_list .title {
		width: 20vw;
		text-align: left;
		color: #333;
		height: 7vw;
		line-height: 7vw;
		font-size: 4vw;
		font-weight: bold;
	}

	.address_list input {
		flex: 1;
		text-align: left;
		color: #333;
		height: 7vw;
		line-height: 7vw;
		font-size: 4vw;
	}

	.address_list textarea {
		flex: 1;
		text-align: left;
		color: #333;
		height: 30vw;
		line-height: 7vw;
		font-size: 4vw;
		background-color: #f5f5f5;
		border-radius: 1vw;
		padding: 1vw;
	}
</style>